<script setup>
// reactive:将对象类型数据转换响应式对象数据
// 用法 1：导入  2：调用  const state = reactive(对象类型数据)
// const userinfo = {
//   username: '张三',
//   age: 18
// }
// 注意点：reactive只支持传入对象类型数据，不支持简单数据类型传入
import { reactive } from 'vue'
const userinfo = reactive({
  username: '张三',
  age: 18
})
const add = () => {
  userinfo.age++
  console.log(userinfo)
}
const num = reactive(10)
</script>

<template>
  <div>
    <div>用户名:{{ userinfo.username }}</div>
    <div>年龄:{{ userinfo.age }}</div>
    <button @click="add">修改年龄</button>
    <hr />
    <div>{{ num }}</div>
    <button @click="num++">修改num</button>
  </div>
</template>
